<template>
	<view>
		<ttBar
			:title="goodData.isDelete ? '课程过期不存在' : ''"
			:bgColor="goodData.isDelete ? '#ffffff' : titleBg"
			:color="goodData.isDelete ? '#000000' : wordsColor"
			:showZhanwei="false"
			titleAlign="left"
			:isShare="isShare"
		>
			<template v-slot:leftCnt>
				<text class="iconfont icon-back lIcon" :style="{ 'background-color': goodData.isDelete ? '#ffffff' : btnBg }"></text>
			</template>
			<template v-slot:rightCnt>
				<text class="iconfont icon-cart rIcon" :style="{ 'background-color': goodData.isDelete ? '#ffffff' : btnBg }" @tap="toCar"></text>
				<text class="iconfont icon-home rIcon" :style="{ 'background-color': goodData.isDelete ? '#ffffff' : btnBg }" @tap="toHome"></text>
			</template>
		</ttBar>

		<view class="deleteBox" v-if="goodData.isDelete">
			<text class="iconfont icon-kecheng"></text>
			<text>课程过期不存在</text>
		</view>

		<view v-if="!goodData.isDelete" class="cntColumn">
			<!-- 轮播图 -->
			<goodSwiper :swiperList="goodData.bannerList" :dotsStyles="dotsStyles" :borderRadius="0"></goodSwiper>

			<!-- 价格与标题 -->
			<lmInfo :goodData="goodData" :lmInfo="lmActive" :actName="actName" :gettime="gettime" :endTime="endTime" ></lmInfo>
			
			<view class="lmBox">
				<view class="numInfo">
					<text class="jionNum">{{ showshujv.signupNum+showshujv.virtualNum }}</text>
					<text class="canyu">人参与</text>
					<text class="liulan">浏览量{{ showshujv.pviewNum+showshujv.virtualNum }}</text>
				</view>
				<view class="notice" v-if="mockUser.length>15">
							<swiper class="swiper-nav" 
							:circular="true" 
							:vertical="true" 
							:autoplay="true" 
							:interval="2000" 
							:duration="2000" 
							style="background-color: #ffff;">
				            <swiper-item style="display: table;" @touchmove.stop='stopTouchMove' v-for="(item,index) in mockUser5" :key="index">
								<view style="width: 100%;height: 150rpx;display: table-cell;vertical-align: middle;" class="right userBox">
									<view class="userItem"  v-for="(i,j) in item" style="float: left;" :key="j">
										<image  :src="i.pic||i.fileName">
										<text>{{ i.buyer||i.nickName }}</text>
									</view>								
								</view>					
							</swiper-item>
							</swiper>
						</view>
				<view class="userBox" v-if="mockUser.length > 0 &&mockUser.length<=15">
					<view  class="userItem" v-for="(item, index) in mockUser" :key="item.index">
						<image :src="item.pic||item.fileName"></image>
						<text>{{ item.buyer||item.nickName }}</text>
					</view>
				</view>
			</view>
			<view class="pintuanBox" v-show="showhdgz">
				<text>拼团规则</text>
				<view style="color: red;"  @tap="toPage" data-url="hdgz">
					<text style="color: red;">最少2人成团，开课前发生退款不退定金</text>
					<text class="iconfont icon-right" style="font-size: 24rpx;" ></text>
				</view>
			</view>

			<!-- 课程tag -->
			<!-- <goodLabels :labels="goodData.labels" v-if="goodData.labels.length>0"></goodLabels> -->

			<!-- 课程保障 -->
			<!-- <goodGuarantee :protectList="goodData.protectList"></goodGuarantee> -->

			<!-- 商品评论 -->
			<!-- <goodEvaluate :cid="goodData.id" :cname="goodData.name"></goodEvaluate> -->

			<!-- 店铺卡片 -->
			<!-- <shop-card :shopInfo="goodData.store"></shop-card> -->

			<!-- <courseParameter :goodParameter="goodData"></courseParameter> -->
			<view class="htmlBox">
				<!-- 图文详情 -->
				<!-- <text class="parameterTitle">课程详情</text> -->
				<goodCnt :goodData="goodData"></goodCnt>
				<!-- 须知 -->
				<!-- <goodXuzhi :goodData="goodData"></goodXuzhi> -->
			</view>

			<lmBottom :resouceData="goodData" :discountPrice="discountPrice" :canGroup="canGroup" :gettime="gettime" :endTime="endTime" :actId="actId" ></lmBottom>
			<!-- 登录的新组件 -->
			<uni-popup ref="popup" type="center" mask-click="false" @touchmove.stop.prevent="moveHandle">
				<newlogin @tap="close"></newlogin>
			</uni-popup>
		</view>
		<qrcode-poster ref="poster" :title="goodData.name" :headerImg="goodData.img" :price="goodData.price"></qrcode-poster>
	</view>
</template>

<script>
import COMM from '@/common/common.js';
import goodSwiper from '@/pagesA/components/goodSwiper/goodSwiper.vue';
import statusBar from '@/components/statusBar/statusBar.vue';
import goodEvaluate from '@/pagesA/components/goodEvaluate/goodEvaluate.vue';
import goodLabels from '@/pagesA/components/goodItem/goodLabels.vue';
import goodGuarantee from '@/pagesA/components/goodItem/goodGuarantee.vue';
import lmInfo from '@/pagesA/components/goodItem/lmInfo.vue';
import goodCnt from '@/pagesA/components/goodItem/goodCnt.vue';
import goodXuzhi from '@/pagesA/components/goodItem/goodXuzhi.vue';
import lmBottom from '@/pagesA/components/goodItem/lmBottom.vue';
import courseParameter from '@/pagesA/components/courseParameter/courseParameter.vue';
import shopCard from '@/pagesA/components/shopCard/shopCard.vue';
import QrcodePoster from '../components/zhangyu-qrcode-poster/zhangyu-qrcode-poster.vue';
import { mapState } from 'vuex';

export default {
	components: {
		goodSwiper,
		statusBar,
		goodEvaluate,
		courseParameter,
		shopCard,
		goodLabels,
		goodGuarantee,
		lmInfo,
		goodCnt,
		goodXuzhi,
		lmBottom,
		QrcodePoster
		
	},
	computed: {
		...mapState({
			userInfo: state => state.user.userInfo,
			isLogin: state => state.user.isLogin,
			initInfo: state => state.sys.initInfo,
			locationCity: state => state.map.locationCity
		})
	},
	data() {
		return {
			videoHeight: uni.getSystemInfoSync().screenWidth,
			titleBg: 'rgba(255,255,255,0)',
			wordsColor: '#FFFFFF',
			btnBg: 'rgba(0,0,0,0.5)',
			mockUser: [],
			mockUser2:[],
			mockUser5: [],
			showshujv:{},
			showhdgz:false,
			gettime:'',
			endTime:'',
			actId:0,
			num:0,
			canGroup:0,
			discountPrice:0,
			goodData: {
				name: '',
				price: 0,
				labels: [],
				running: 1,
				isDelete: 0,
				stock: 2,
				prepay: 0,
				consIncs: {
					costflow:
						'1.下订单并支付预约金或全款；\n2.（若该课程支持体验）咨询店铺客服预约体验；\n3.上体验课前将体验码给店铺客服进行验证；\n4.满意则（已支付预约金的订单再支付尾款后）等待开课；',
					costknow:
						'1.下单后，点击课程详情或订单详情“客服头像”，直接咨询店铺客服，进行预约。\n2.请在确定体验后，再将体验码交给店铺客服。体验码交给店铺客服后，视为已体验。\n3.如确定报名该课程，则需缴纳（课程价-预约金）元。\n4.若您还有其他疑问，请在工作日9:00-20:00间，拨打找培训官方客服：025-84583336。',
					costkown2: ''
				}
			},				
			shopInfo: {
				id: 0
			},
			dotsStyles: {
				width: 6,
				height: 4,
				bottom: -16,
				backgroundColor: '#c5c3c6',
				border: 'none',
				selectedBackgroundColor: '#ff6902',
				selectedBorder: 'none',
				borderRadius: 2
			},
			id: 0,
			gundongtop: 0,
			isShare: 0,
			lmActive: null,
			actName:''
		};
	},
	methods: {
		
		open() {
			// 通过组件定义的ref调用uni-popup方法
			this.$refs.popup.open();
			
		},
		
		close() {
			// 通过组件定义的ref调用uni-popup方法
			this.$refs.popup.close();
			
		},
		//分享调用的函数
		showPoster() {
			uni.showLoading({
				title: '加载中...',
				mask: true
			});
			let _href = '';
			if (this.isLogin) {
				_href = 'url=lmDetail&id=' + this.actId + '&uid=' + this.userInfo.userId;
			} else {
				_href = 'url=lmDetail&id=' + this.actId;
			}
			this.$store.dispatch('apiGetMPToken').then(res => {
				this.$store
					.dispatch('apiGetMpCodeImg', {
						token: res.data.data.access_token,
						page: 'pages/index/index',
						scene: _href,
						width: 280
					})
					.then(imgRes => {
						
						if (imgRes.data.code == 1) {
							
							this.$refs.poster.showCanvas(imgRes.data.data);
							this.$store.dispatch('apiPostLmNum', {
								id: this.lmActive.id,
								numshare: 1
							});
						} else {
						}
					});
			});
		},
		getData() {
			this.lmActive = uni.getStorageSync('lmAct');
			uni.showLoading({
				title: '正在加载中'
			});
			this.$store
				.dispatch('apiGetGroupDetail', {
					id: this.id,
					userId: this.isLogin ? this.userInfo.userId : 0
				})
				.then(res => {				
										
					this.actName = res.data.data.actName					
					this.showshujv = res.data.data													
					this.gettime = res.data.data.startTime
					this.endTime = res.data.data.endTime
					this.actId=res.data.data.id;
					this.canGroup = res.data.data.canGroup;
					this.$store.dispatch("apiGetGoodDetailById", {
							id: res.data.data.courseId,
							userId: this.isLogin ? this.userInfo.userId : 0,
							actId:this.actId
						}).then(res => {	
							
							this.goodData = res.data.data;							
							this.shopInfo = res.data.data.store;
							this.discountPrice = res.data.discountPrice
							
							uni.hideLoading();
							this.postTongji();
						})
						.catch(err => {
					
						})					
				})
				.catch(err => {});

			// 模拟数据
			if (this.lmActive.virtualNum != 0) {				
				this.num=this.lmActive.virtualNum
				this.$store.dispatch("mockNum",{
					  actId:this.id,
					  num:this.num										
				    }).then(res => {
					
					this.mockUser = res.data.data;
					this.mockUser2 = res.data.dataUser;
					
					// 两个数组合并
					this.mockUser.push.apply(this.mockUser,this.mockUser2); 																			
					var index=0
						 for(var i=0;i<(this.mockUser.length/5);i++){
						    var arrTemp = [];
						    for(var j=0;j<5;j++){
						        arrTemp[j] = this.mockUser[index++];
						        if(index==this.mockUser.length){
						            break;
						        }
						    }
						    this.mockUser5[i] = arrTemp;
						  }						  
				})
				.catch(err => {
						
				})			
			}
		},
		toCar() {
			if (this.isLogin) {
				this.toPage('car');
			} else {
				// this.toPage({
				// 	url: 'login',
				// 	to: 'car'
				// });
				this.open()
			}
		},
		toHome() {
			this.toPage({
				url: 'index'
			});
		},
		// 分享
		share() {
			uni.$emit('showShare', {
				type: 2, //拼团1 课程2  店铺3
				id: this.goodData.id
			});
			this.$refs.shareAction.open();
		},
		// 上传统计
		postTongji() {
			this.$store.dispatch('apiPostTongji', {
				storeId: this.shopInfo.id,
				type: 1,
				userId: this.isLogin ? this.userInfo.userId : 0
			});
			this.$store
				.dispatch('apiPostLmNum', {
					id: this.lmActive.id,
					numpview: 1
				})
				.then(res => {
					
				})
				.catch(err => {
					
				});
		},
		
		
	},
	onLoad(cfm) {				
		this.id = cfm.id;
		this.isShare = cfm.isShare ? parseInt(cfm.isShare) : 0;
		this.getData();
		this.$store.dispatch('getClickId', cfm);
		uni.$on('toggleGz', payload => {
			if (this.goodData.fav == 0) {
				this.goodData.fav = 1;
			} else {
				this.goodData.fav = 0;
			}
		});
		// 监听页面返回事件
		uni.$on('update', function(data) {
			
		});
		
		// 自动登录
		// 判断能不能获取到本地存储的'token'		
		if (uni.getStorageSync('token')) {	
			this.$store.dispatch("apiUserAutoLogin", {
				token: uni.getStorageSync('token')
			}).then(res => {
				
				setTimeout(() => {
					this.$store.dispatch("timLogin", res.data.data.imid).then(timRes => {
						setTimeout(() => {
							this.$store.dispatch("timEditInfo", {
								nick: res.data.data.nickname,
								role: 2
							})
						}, 1000)
					})
					let _data={
							userId:res.data.data.userId,
							city:parseInt(this.locationCity.adcode),
							version:'MP'
						};
					this.$store.dispatch("eidtUserInfo",_data)
				}, 500)
			}).catch(res => {
				 
			})
		}
	},

	onPageScroll(e) {
		// this.gundongtop=e.scrollTop;
		// if (e.scrollTop > this.videoHeight && this.wordsColor=='#FFFFFF') {
		// 	this.titleBg = 'rgba(255,255,255,1)';
		// 	this.wordsColor = "#000000";
		// 	this.btnBg="rgba(255,255,255,1)";
		// } else if(e.scrollTop <= this.videoHeight && this.wordsColor=='#000000') {
		// 	this.titleBg = 'rgba(255,255,255,0)';
		// 	this.wordsColor = "#FFFFFF";
		// 	this.btnBg="rgba(0,0,0,0.5)";
		// }
	},
	onShareAppMessage(res) {
		let _href = '';
		if (this.isLogin) {
			_href = 'pagesA/lmDetail/lmDetail?id=' + this.id + '&uid=' + this.userInfo.userId + '&isShare=1';
		} else {
			_href = 'pagesA/lmDetail/lmDetail?id=' + this.id + '&isShare=1';
		}
		return {
			title:  this.goodData.name,
			path: _href,
			imageUrl: this.goodData.img
		};
	},
	//分享到朋友圈
	onShareTimeline(res){	
			let _href = '';
			if (this.isLogin) {
				_href = 'pages/index/index?url=lmDetail&id=' + this.id + '&uid=' + this.userInfo.userId;
			} else {
				_href = 'pages/index/index?url=lmDetail&id=' + this.id;
			}
			return {
				title:  this.goodData.name,
				path: _href,
				imageUrl: this.goodData.img
			};
		
	},
	// 下拉刷新
	onPullDownRefresh() {
		setTimeout(() => {
			this.getData();
			uni.stopPullDownRefresh();
		}, 1000);
	},
	onUnload() {
		// uni.removeStorageSync("toGood")
	}
	
	
};
</script>

<style lang="less">
page {
	background-color: #f4f4f4;
}
.lmBox {
	display: flex;
	flex-direction: column;
	background-color: #ffd65b;
	padding: 18upx;
	.numInfo {
		display: flex;
		background-color: #ffffff;
		border-radius: 10upx;
		height: 100upx;
		align-items: center;
		padding: 0 40upx;
		font-size: 32upx;
		margin-bottom: 20upx;
		.jionNum {
			color: #f22d2d;
			font-size: 48upx;
			font-weight: bold;
		}
		.canyu {
			flex-grow: 1;
			font-size: 32upx;
		}
		.liulan {
		}
	}
	.userBox {
		display: flex;
		background-color: #ffffff;
		border-radius: 10upx;
		justify-content: flex-start;
		padding: 20upx 40upx 20upx 20upx;
		flex-wrap: wrap;
		.userItem {
			display: flex;
			flex-direction: column;
			align-items: center;
			flex-shrink: 0;
			width: 20%;
			margin-bottom: 20upx;
			image {
				width: 80upx;
				height: 80upx;
				border-radius: 50%;
			}
			text {
				font-size: 24upx;
				margin-top: 10upx;
			}
		}
	}
}
.cntColumn {
	display: flex;
	flex-direction: column;
}

/* #ifdef MP */
.titleBg {
	width: 100%;
	position: fixed;
	top: 0;
	left: 0;
}

.goodTitle {
	position: fixed;
	width: 100%;
	height: 90upx;
	line-height: 90upx;
	text-align: center;
	left: 0;
	padding-right: 28%;
	box-sizing: border-box;
	font-size: 36upx;
}

.backBtn {
	position: fixed;
	width: 60upx;
	height: 60upx;
	margin-top: 16upx;
	left: 28upx;
}

.carBtn {
	position: fixed;
	width: 60upx;
	height: 60upx;
	margin-top: 16upx;
	right: 28%;
}

/* #endif */

.mainCnt {
	padding: 0 28upx;
}

.htmlBox {
	padding: 18upx 28upx 180upx 28upx;
	display: flex;
	flex-direction: column;
	background-color: #ffffff;

	// .parameterTitle {
	// 	font-size: 32rpx;
	// 	font-weight: bold;
	// 	color: #202932;
	// }

	.dtText {
		margin-bottom: 20upx;
		font-size: 32upx;
		color: #202932;
	}
}

.xuzhiBox {
	padding-top: 20upx;
	display: flex;
	flex-direction: column;

	.gmTitle {
		font-size: 32upx;
		color: #000000;
		font-weight: bold;
		margin-bottom: 10upx;
	}

	.xzTitle {
		font-size: 32upx;
		// font-weight: bold;
		color: #666666;
		margin-bottom: 10upx;
	}

	text {
		font-size: 28upx;
		margin-bottom: 10upx;
		color: #202932;
	}

	.fuwuBox {
		display: flex;

		text {
			display: block;
			width: 33.33%;
		}
	}
}

.rIcon {
	font-size: 44upx;
	font-weight: normal;
	margin-left: 20upx;
	width: 70upx;
	height: 70upx;
	background-color: rgba(0, 0, 0, 0.5);
	text-align: center;
	line-height: 70upx;
	border-radius: 50%;
}

.lIcon {
	font-size: 44upx;
	font-weight: normal;
	width: 70upx;
	height: 70upx;
	background-color: rgba(0, 0, 0, 0.5);
	text-align: center;
	line-height: 70upx;
	border-radius: 50%;
}

.deleteBox {
	display: flex;
	flex-direction: column;
	padding-top: 150upx;
	width: 100%;
	align-items: center;

	.icon-kecheng {
		font-size: 120upx;
		width: 200upx;
		height: 200upx;
		background-color: #cccccc;
		border-radius: 50%;
		text-align: center;
		line-height: 200upx;
		color: #ffffff;
		margin-bottom: 40upx;
	}

	text {
		font-size: 32upx;
	}
}
.pintuanBox {
	font-size: 24rpx;
	height: 80rpx;
	line-height: 80rpx;
	background-color: #fff;
	// border-top: 1px solid #ccc;
	// border-bottom: 1px solid #ccc;
	display: flex;
	justify-content: space-between;
	padding: 0 20rpx;
	margin: 10rpx 0;
}
.notice{
	height: 200rpx;
	.swiper-nav{
		height: 100%;
		swiper-item{
			height: 100%;
		}
		
	}
}

</style>
